let mask = null; // 底层透明底
let view = null; // 弹窗提示部分
let content_header = null; // 弹窗背景
let log_area=null;   // 更新日志
let log=null;   // 更新日志
let btn_area=null;
let btn_cancel=null;
let btn_confirm=null;

const update_model={};

export default {
	viewHotFixInit(obj,callback){
		/*
		*  obj 参数对象
		*   systemInfo  系统参数
		*   log_data   更新日志
		*
		*/        
		let screenWidth = obj.systemInfo.screenWidth;
		let screenHeight = obj.systemInfo.screenHeight;
		let log_data=[];
		let log_area_heigth=obj.log_data.length*30+20;
		let btn_area_top=log_area_heigth+157;
		let content_height=157+log_area_heigth+40;
		let content_top=(obj.systemInfo.screenHeight-content_height)/2;
		let content_left=(obj.systemInfo.screenWidth - 250) / 2; 
 
		for(let i=0;i<obj.log_data.length;i++){
			let log_item={
				tag: 'font',
				id: 't'+i,
				text: obj.log_data[i],
				position: { 
					top:30*i+'px',
					left:'16px',
					width: '230px',
					height:'50px'
				},
				textStyles: {
					align: 'left', 
					color: '#333',
					size: '14px',
					whiteSpace:'normal'
				}
			}
			log_data.push(log_item)
		}
		
		// 绘制底层遮罩
		if (!mask) {
			mask = new plus.nativeObj.View('viewHotFixMask', {
				bottom: '0px',
				left: '0px',
				right: '0px',
				top: '0px',
			});
		}
		
		mask.drawRect({
			color: 'rgba(0, 0, 0, 0.5)'
		}); 
		mask.show();
		
		// 绘制弹窗背景
		if (!content_header) {
			content_header = new plus.nativeObj.View('content_header', {
				top: content_top+'px',
				left: content_left + 'px',
				height: '157px',
				width: '250px',
				position: 'dock'
			})
			content_header.drawBitmap( '/static/images/update_icon.png', 
				{top:'0px',left:'0px',width:'100%',height:'100%'}, 
				{top:'auto',left:'auto',width:'250px',height:'157px'},
			);
			content_header.drawText('发现新版本', 
				{top: '0', left: '16px',width:'100%',height:'100%'}, 
				{align: 'left',size:'16px',color:'#ffffff'},
			);
			content_header.drawText('v'+obj.version,
				{top: '20px',left: '30px', width:'100%',height:'100%'}, 
				{align: 'left',size:'16px',color:'#ffffff'},
			);
		 
			content_header.show();
		};
		
		// 绘制log区域
		if(!log_area){
			log_area = new plus.nativeObj.View('log_area', {
				top: content_top+157+'px',
				left: content_left + 'px',
				height: log_area_heigth+'px',
				width: '250px',
				position: 'dock'
			})
			log_area.drawRect({
				color: 'rgba(255, 255, 255, 1)' // 定义白色颜色
			})
			
			log_area.show();
		}
		
		// 绘制log内容
		if(!log){
			log = new plus.nativeObj.View('log', {
				top: content_top+150+'px',
				left: content_left + 'px',
				height: log_area_heigth+'px',
				width: '250px',
				position: 'dock'
			}, log_data)			 
			
			log.show();
		}
		
		// 绘制按钮区域
		if(!btn_area){
			btn_area = new plus.nativeObj.View('btn_area', {
				top: (btn_area_top+content_top)+'px',
				left: content_left + 'px',
				height: '40px',
				width: '250px',
				position: 'dock'
			})
			btn_area.drawRect({
				color: 'rgba(255, 255, 255, 1)' // 定义白色颜色
			})
			
			btn_area.show();
		}
		
		// 绘制取消按钮
		if(!btn_cancel){
			btn_cancel=new plus.nativeObj.View('btn_cancel',{
				top: (btn_area_top+content_top+5)+'px',
				left: content_left +15+ 'px',
				height: '25px',
				width: '100px',
				position: 'dock'
			})
			btn_cancel.drawRect({color:'rgba(255,255,255,0)',borderColor:'#999999',borderWidth:'1px',radius:'15px'})
			btn_cancel.drawText('暂不更新',
				{top: '0',left: '0', width:'100px',height:'25px'}, 
				{align: 'center',size:'14px',color:'#999999'},
			);
			btn_cancel.addEventListener("click", () => { 
				console.log(123)
				cancle();
			}, false);
			
			btn_cancel.show();
		}
		
		// 绘制取消按钮
		if(!btn_confirm){
			btn_confirm=new plus.nativeObj.View('btn_confirm',{
				top: (btn_area_top+content_top+5)+'px',
				left: content_left+135 + 'px',
				height: '25px',
				width: '100px',
				position: 'dock'
			})
			btn_confirm.drawRect({color:'rgba(255,0,0,1)',radius:'15px'})
			btn_confirm.drawText('下载更新',
				{top: '0',left: '0', width:'100px',height:'25px'}, 
				{align: 'center',size:'14px',color:'#ffffff'},
			);
			
			btn_confirm.show();
		}
		
	},
	
	viewHotFixInit1(obj) {
		// obj 系统参数  
		let screenWidth = obj.screenWidth;
		let screenHeight = obj.screenHeight;

		if (!mask) {
			mask = new plus.nativeObj.View('viewHotFixMask', {
				bottom: '0px',
				left: '0px',
				right: '0px',
				top: '0px',
			});
		}

		mask.drawRect({
			color: 'rgba(0, 0, 0, 0.5)'
		});
		mask.addEventListener("click", () => {
			console.log("--------------->view touchend")
		}, false);
		mask.show();

		if (!content_bg) {
			content_bg = new plus.nativeObj.View('viewHotFixBgIcon', {
				top: '0',
				left: (obj.screenWidth - 250) / 2 + 'px',
				height: '157px',
				width: '250px',
				position: 'dock'
			},
			[
				{
					tag: 'img',
					id: 'bgroundicon',
					position: {
						top: '0',
						left: '0',
						width: '250px',
						height: '157px'
					},
					src: '/static/images/update_icon.png'
				},
				{
					tag: 'font',
					id: 'icon',
					text: '发现新版本',
					position: {
						top: '45px',
						left: '16px',
						width: '100%',
						height: '50px',
					},
					textStyles: {
						align: 'left',
						color: '#fff',
						size: '16px'
					}
				},
				{
					tag: 'font',
					id: 'version',
					text: 'v1.0.0',
					position: {
						top: '65px',
						left: '30px',
						width: '100%',
						height: '50px',
					},
					textStyles: {
						align: 'left',
						color: '#fff',
						size: '16px'
					}
				},
			])
 
			content_bg.show();
		};
		
		if(!log_area){
			log_area=new plus.nativeObj.View('viewHotFixLogArea',{
				top: '157px',
				left: (obj.screenWidth - 250) / 2 + 'px',
				height: '150px',
				width: '250px',
				position: 'dock'
			})			
			log_area.drawRect({
				color: 'rgba(255, 255, 255, 1)' // 定义白色颜色
			})
			log_area.show();
		};
		
		if(!log){
			log=new plus.nativeObj.View('viewHotFixLog',{
				top: '107px',
				left: (obj.screenWidth - 250) / 2 + 'px',
				height: '150px',
				width: '230px',
				position: 'dock'
			},[
				{
					tag: 'font',
					id: 't1',
					text: '1、我们知道div动画效果不好，webview的动画效果要好很多，但追求极致的话，nativeobj的动画是效果最好的',
					position: { 
						top:'0',
						left: '16px', 
						width: '240px',
					},
					textStyles: {
						align: 'left',
						margin: '8px',
						color: '#333',
						size: '14px',
						whiteSpace:'normal'
					}
				},
				{
					tag: 'font',
					id: 't2',
					text: '2、发现新版本',
					position: { 
						left: '16px', 
					},
					textStyles: {
						align: 'left',
						color: '#333',
						size: '14px'
					}
				},
				{
					tag: 'font',
					id: 't3',
					text: '3、发现新版本',
					position: { 
						left: '16px', 
					},
					textStyles: {
						align: 'left',
						color: '#333',
						size: '14px'
					}
				}
			]) 
			log.show();
		}
		
		if(!btn_cancel){
			btn_cancel=new plus.nativeObj.View('btn_cancel',{
				top: '200px',
				left: '50px',
				height: '150px',
				width: '250px',
				position: 'dock'
			},[
				{
					tag: 'font',
					id: 'down',
					text: '下载更新',
					position: { 
						left: '16px', 
					},
					textStyles: {
						align: 'left',
						color: '#333',
						size: '14px'
					}
				},
			])
			btn_cancel.drawRect({color:'rgba(255,0,0,1)',borderWidth:'2px',radius:'5px'}) 
			
			btn_cancel.show();
		}


		if (view) {
			view = new plus.nativeObj.View('viewHotFixView', {
					top: '30%',
					left: (obj.screenWidth - 250) / 2 + 'px',
					height: '250px',
					width: '70%',
					position: 'dock'
				},
				[{
						tag: 'img',
						id: 'bgroundicon',
						position: {
							top: '0',
							left: '0',
							width: '250px',
							height: '157px'
						},
						src: '/static/images/update_icon.png'
					},
					{
						tag: 'font',
						id: 'icon',
						text: '发现新版本',
						position: {
							top: '45px',
							left: '16px',
							width: '100%',
							height: '50px',
						},
						textStyles: {
							align: 'left',
							color: '#fff',
							size: '16px'
						}
					},
					{
						tag: 'font',
						id: 'version',
						text: 'v1.0.0',
						position: {
							top: '65px',
							left: '30px',
							width: '100%',
							height: '50px',
						},
						textStyles: {
							align: 'left',
							color: '#fff',
							size: '16px'
						}
					},
					{
						tag: 'font',
						id: 'title',
						text: '版本更新中.. .',
						position: {
							bottom: '40px',
							left: '16px',
							width: '100%',
							height: '50px',

						},
						textStyles: {
							align: 'left',
							color: '#000',
							weight: 'bold',
							size: '14px'
						}
					}, {
						tag: 'rect',
						id: 'processGB',
						position: {
							bottom: '40px',
							left: '5%',
							width: '90%',
							height: '9px',
						},
						rectStyles: {
							color: 'rgba(186, 186, 186, 1.0)',
							size: '100%',
							radius: '3px'
						}
					}, {
						tag: 'rect',
						id: 'processFR',
						position: {
							bottom: '40px',
							left: '5%',
							width: '0',
							height: '9px',
						},
						rectStyles: {
							color: 'rgba(110, 166, 64, 1.0)',
							size: '100%',
							radius: '3px'
						}
					}, {
						tag: 'font',
						id: 'process',
						text: '0%',
						position: {
							bottom: '10px',
							left: '5%',
							width: '40px',
							height: '30px',
						},
						textStyles: {
							align: 'left',
							color: '#000',
							size: '15px'
						}
					}
				])
		}
			view.drawRect({
				// color: 'rgba(255, 255, 255,1)',
				// radius:'10px',
				color: 'rgba(255, 255, 255, 0)' // 有颜色
			});
			view.show()
	},
	 
	viewHotFixHide() {
		console.log('hide')
		if (content_header) {
			content_header.hide()
		}
		if (mask) {
			mask.hide()
		}
		if (log_area) {
			log_area.hide()
		}
		if (log) {
			log.hide()
		}
		if (btn_area) {
			btn_area.hide()
		}
		if (btn_cancel) {
			btn_cancel.hide()
		}
		if (btn_confirm) {
			btn_confirm.hide()
		} 
	}
}
